<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>订单支付-{{$SEO['title']}}</title>
    <meta name="keywords" content="{{$SEO['keywords']}}"/>
    <meta name="description" content="{{$SEO['description']}}"/>
    <!--公用css引用-->
            @include('front.common.style')
            <!--END/公用css引用-->
    <link rel="stylesheet" href="../dist/css/confirm-order.css">
</head>
<body>

        @inject('userService','App\Interfaces\UserService')

<!--公共头部-->
@include('front.common.header', ['noTopNav' => 'true'])
        <!--END/公共头部-->
<div class="inbox pay-order">
    <div class="ad-o-b">
        <div class="ad-o-inner fn-ohide ui-nobrd-b">
            <i class="icon icon-order-status icon-ord-st-ok"></i>

            <span class="font-22">订单提交成功，现在只差最后一步啦！</span>

            <p class="font-14 fn-mt10">请您在提交订单后 <span class="text-color-1 js-num">1小时59分</span> 内完成支付，否则订单将会自动取消！</p>

        </div>
        <!--<div class="ad-o-inner ui-nobrd-b">
            <a href="" class="fn-fr text-color-9 link">我的订单 &gt;</a>
            <p>飞科（FLYCO）FR5001充电式毛球修剪器 剃去毛球器      保税区直发  郑州保税仓发货</p>
            <p class="fn-mt6">收货信息：河南省 郑州市 中原区  中原西路  收件人姓名  电话：18600000000</p>

        </div>-->
    </div>
</div>

<div class="inbox">
    <p class="fn-mt20 fn-mb10"><span class="font-18 text-color-1 fn-mr20">支付详情</span> <span>注：由于仓储不同，免税商品和E贸易商品将拆分成两个订单，需要单独进行支付。</span>
    </p>
</div>
@foreach($orders as $key=>$order)

    @if($order['order_type']==0 && $order['total_goods_number']>0)
        <div class="inbox pay-order fn-mt0">
            <div class="ad-o-b  fn-mb30">
                <div class="ad-o-inner fn-ohide ">
                    <p><span class="font-18 text-color-7">免税订单  支付金额：</span><span class="font-24 text-color-1">￥{{$order->pay_price}}</span></p>
                </div>
                <div class="ad-o-inner ui-nobrd-b">
                    <div class="payWays js-simRadio" data-id="{{$order->order_id}}" data-sn="{{$order->order_sn}}">
                        <div class="js-check wrap alipay cur" data-text="用支付宝支付" data-url="/pay/request/{{$order->order_id}}/1">
                            <input type="radio" id="zhiFuBao" name="order1" checked="checked">
                            <label class="icon pay-icon alipay-icon"></label>
                        </div>
                        <!-- <div class="js-check wrap alipay" data-text="用通联支付" data-url="/pay/request/{{$order->order_id}}/2">
                            <input type="radio" name="payways" id="tonglian" >
                            <label for="xxBao" class="icon pay-icon2 tonglian-icon"></label>
                        </div> -->
                        <div class="js-check wrap wxpay" data-text="用微信支付" data-url="/pay/request/{{$order->order_id}}/3">
                            <input type="radio" id="wxpay" name="order1" >
                            <label class="icon pay-icon3 wxpay-icon"></label>
                        </div>
                        <div class="js-check wrap pinganpay" data-text="平安银行支付" data-url="/pay/request/{{$order->order_id}}/4">
                            <input type="radio" id="pingAn" name="order1">
                            <label class="icon pay-icon4"></label>
                        </div>

                        <a href="/pay/request/{{$order->order_id}}/1" target="_blank" class="fn-btn btn-primary payBtn js-payBtn">用支付宝支付</a>
                    </div>
                </div>

                <div class="ad-o-inner ui-nobrd-b wxpay-box">
                    <div class="qrcode">
                        <img class="wxCodeImg" src="/pay/request/wxpay/sacn_url/{{$order->order_id}}" alt="">
                    </div>
                    <div class="tip-info"></div>
                </div>
            </div>
        </div>

    @elseif($order['order_type']==1 && $order['total_goods_number']>0)
        <div class="inbox pay-order fn-mt0">
            <div class="ad-o-b">
                <div class="ad-o-inner fn-ohide">
                    <p><span class="font-18 text-color-7">E贸易订单 支付金额：</span><span class="font-24 text-color-1">￥{{$order->pay_price}}</span></p>
                </div>
                <div class="ad-o-inner ui-nobrd-b">
                    <div class="payWays js-simRadio" data-id="{{$order->order_id}}" data-sn="{{$order->order_sn}}">
                        <div class="js-check wrap alipay cur" data-text="用支付宝支付" data-url="/pay/request/{{$order->order_id}}/1">
                            <input type="radio" id="zhiFuBao" name="order2" checked="checked">
                            <label class="icon pay-icon alipay-icon"></label>
                        </div>
                        <!-- <div class="js-check wrap alipay" data-text="用通联支付" data-url="/pay/request/{{$order->order_id}}/2">
                            <input type="radio" name="payways" id="tonglian" >
                            <label for="xxBao" class="icon pay-icon2 tonglian-icon"></label>
                        </div> -->
                        <div class="js-check wrap wxpay" data-text="用微信支付" data-url="/pay/request/{{$order->order_id}}/3">
                            <input type="radio" id="wxpay" name="order2" >
                            <label class="icon pay-icon3 wxpay-icon"></label>
                        </div>
                        <div class="js-check wrap pinganpay" data-text="平安银行支付" data-url="/pay/request/{{$order->order_id}}/4">
                            <input type="radio" id="pingAn" name="order2">
                            <label class="icon pay-icon4"></label>
                        </div>

                        <a href="/pay/request/{{$order->order_id}}/1" target="_blank" class="fn-btn btn-primary payBtn js-payBtn">用支付宝支付</a>
                    </div>
                </div>

                <div class="ad-o-inner ui-nobrd-b wxpay-box">
                    <div class="qrcode">
                        <img class="wxCodeImg" src="/pay/request/wxpay/sacn_url/{{$order->order_id}}" alt="">
                    </div>
                    <div class="tip-info"></div>
                </div>
                <div class="ad-o-inner ui-nobrd-b pinganpay-box">
                    <div class="qrcode">
                        实名认证
                    </div>
                    <div class="tip-info"></div>
                </div>
            </div>
        </div>

    @endif

@endforeach




<!--公共尾部-->
@include("front.common.footer")
<!--END/公共尾部-->

<!--公用js引用-->
@include("front.common.script")
<script src="../dist/js/jquery.validation.js"></script>

<script id="tpl" type="text/html">
    <form method="GET" action="/pinganpay/identity_verification" class="form-horizontal js-form bl-form bl-formhor form-L fn-mt20 fn-mb20">
        <ul class="ul-group ajax-form">
            <li class="bl-form-group">
                <label><em class="text-color-6">*</em>姓名：</label>
                <div class="controls">
                    <input id="name" class="form-control fn-tinput fn-tinput-long elementJs" type="text" name="name" placeholder="请填写真实姓名，长度不超过12个字" required data-msg-required="请填写真实姓名" maxlength="75" data-msg-maxlength="小于12个字">
                </div>
            </li>

            <li class="bl-form-group">
                <label><em class="text-color-6">*</em>身份证号码：</label>
                <div class="controls">
                    <input id="identity" class="form-control fn-tinput fn-tinput-long elementJs" type="text" name="identity" placeholder="请填写用户本人的真实身份证号码" required data-msg-required="请填写身份证" data-rule-idCard="true">
                </div>
            </li>

            <li class="bl-form-group">
                <label><em class="text-color-6">*</em>手机号码：</label>
                <div class="controls">
                    <input id="mobile" class="form-control fn-tinput fn-tinput-small elementJs" type="text" name="mobile" placeholder="请填写常用手机号" required data-msg-required="请填写手机号" data-rule-mobile="true">
                    <a id="btnSendCode" class="fn-btn" style="width: 100px;padding:8px 0;">获取验证码</a>
                    <label id="mobile-error" class="error" for="mobile"></label>
                </div>
            </li>

            <li class="bl-form-group">
                <label><em class="text-color-6">*</em>验证码：</label>
                <div class="controls">
                    <input id="verification_code" class="form-control fn-tinput fn-tinput-long elementJs" type="text" name="verification_code" placeholder="请填写短信验证码" required data-msg-required="请填写验证码">
                </div>
            </li>

            <li class="bl-form-group form-text">
                <label class="for fn-vhide">协议：</label>
                <div class="controls">
                    <label>
                        <input id="rememberMe" type="checkbox" name="rememberMe" checked="checked">
                        <span>同意<a class="text-color-8" href="https://my.orangebank.com.cn/orgLogin/dzht/grhyfwxy.html" target="_blank">《平安银行橙e网个人会员服务协议》</a></span>
                    </label>
                </div>
            </li>

            <li class="bl-form-group bl-form-btns">
                <label class="fn-vhide">提交：</label>
                <div class="controls">
                    <button class="fn-btn btn-primary fn-mr8 btn-save" type="submit">确定</button>
                    <button class="fn-btn btn-nostyle btn-cancel" type="button">取消</button>
                </div>
            </li>
        </ul>
    </form>
</script>

<!--END/公用js引用-->
<script>
    var token = "{{csrf_token()}}";
    var wxTimer=0;

    $('.js-simRadio').on('click','.js-check',function(){
        var that=$(this),wrap=that.closest('.js-simRadio');
        var jqP=that.closest('.ad-o-inner');
        var order_id = wrap.data('id');
        var order_sn1 = wrap.data('sn');

        if(that.hasClass('cur')) return false;

        that.addClass('cur').siblings('.cur').removeClass('cur').find('input').prop('checked',false);
        that.find('input').prop('checked',true);

        //切换按钮文字
        var selTxt=$('.js-payBtn',wrap);
        if(selTxt.length){
            selTxt.text(that.data('text'));
            selTxt.attr('href',that.data('url'));
        }

        //加载微信二维码
        var wxpayBox=that.closest('.pay-order').find('.wxpay-box');
        if(that.hasClass('wxpay')){
            jqP.removeClass('ui-nobrd-b');
            selTxt.hide();
            wxpayBox.slideDown();
            //加载二维码图片
            reloadWxCode(wxpayBox,order_id,order_sn1);
        }else{
            jqP.addClass('ui-nobrd-b');
            selTxt.show();
            wxpayBox.slideUp();
            clearInterval(wxTimer);
        }

    });

    $('.js-payBtn').on('click',function (e) {
        var that=$(this),href=that.attr('href');
        var cur=that.closest('.js-simRadio').find('.cur');
        if(that.hasClass('disabled')||that.prop('disabled')) return false;
        //选用平安支付
        if(cur.hasClass('pinganpay')&&!that.data('isAuth')){
            e.preventDefault();
            that.addClass('disabled').text('加载中...');
            //第一步：查询用户是否已经实名认证
            //已实名认证则直接继续生成订单
            //未实名认证：
            var url='/user/hasIdVerity';
            $.ajax({
                url: url + "?" + Math.random(),
                type: 'post',
                data: {'_token': token},
                success: function (res) {
                    if (res == "false") {
                        //未实名认证,弹出实名认证框
                        pinganAuth(href,that);
                        that.removeClass('disabled').text('实名认证');
                        return false;
                    }
                    window.location.href=href;
                },
                error:function (e) {
                    layer.alert(e.message||'服务器繁忙，请稍后再试！');
                }
            });

            //第二步：发送短信验证码

            //第三步：注册橙e网

            //第四步：记录用户的实名认证信息

        }
    });

    function pinganAuth(href,jqPbtn) {
        var payLayer=layer.open({
            type: 1,
            title: '平安银行实名认证',
            shadeClose: false,
            area: ['500px','400px'], //宽高
            content: $('#tpl').html(),
            success: function(layero, index) {//layero--当前层DOM,index--当前层索引
                var jsForm=$('.js-form',layero);
                var codeBtn=$('#btnSendCode');

                codeBtn.click(function(){
                    if(codeBtn.hasClass('disabled')) return false;

                    var that=$(this),sNum=120000,countDown;

                    var phone = $('#mobile'),phoneNum=phone.val();
                    var url='/pinganpay/pingan_send_msg/'+phoneNum;

                    if(!phone.valid()){
                        phone.focus();
                        return false;
                    }

                    $.ajax({
                        url:url,
                        type:'get',
                        data: {'_token': token},
                        dataType:'json',
                        success:function(res){
                            countDown=tools.buttonCountdown(that,sNum,'m:s','后重发',phoneNum);
                        },
                        error:function(e){
                            that.removeClass('disabled');
                            phone.next('.error').show().text(e.responseJSON.phone[0]).end().focus();
                        }
                    })
                });

                //表单验证
                jsForm.validate({
                    submitHandler:function(form){
                        var btn=jsForm.find('.btn-save');
                        jsForm.find('#rememberMe').prop('checked',true);

                        btn.addClass('disabled').prop('disabled',true).text('提交中...');
                        $.ajax({
                            url:form.action,
                            type:'get',
                            dataType:'json',
                            data:jsForm.serialize(),
                            success:function(res){
                                if(res.status){
                                    layer.close(index);//关闭弹层
                                    //去平安支付
                                    jqPbtn.data('isAuth',true).text('用平安银行支付');
                                    window.location.href=href;
                                }else{
                                    btn.removeClass('disabled').prop('disabled',false).text('确定');
                                }
                            },
                            error:function(error){
                                //渲染错误信息
                                btn.removeClass('disabled').prop('disabled',false).text('确定');
                            }
                        });
                    }
                });

                //取消事件
                jsForm.on('click','.btn-cancel',function(){
                    layer.close(index);
                });
            }
        });
    }

    function reloadWxCode(wrap,order_id,order_sn1) {
        clearInterval(wxTimer);
        wxTimer=setInterval(function(){checkWxPay(order_id,order_sn1);}, 5000);  //5秒查询一次支付是否成功
    }

    function checkWxPay(order_id,order_sn1){

        var url = "wxpay/order_query/" + order_sn1 + '/array';

        var id = order_id;

        $.ajax({
            url: url + "?" + Math.random(),
            type: 'post',
            dataType: "json",
            success: function (result) {
                // console.log(result);
                switch(result.data.trade_state)
                {
                    case 'SUCCESS':

                        //支付成功,调用微信支付回调接口
                        $.ajax({
                            url: '/pay/callback/wxpay_server' + "?" + Math.random(),
                            type: 'post',
                            processData: false,
                            data: result.xml,
                            token:'{{csrf_token()}}',
                            dataType: "json",
                            success: function (result) {
                                if (result.status) {
                                    // console.log('回调成功啦');

                                    //延迟3000毫秒执行tz() 方法
                                    setTimeout("location.href='/pay/success/"+order_id+"'",3000);
                                } else {
                                    // alert(result.message);

                                }
                            }

                        });

                    break;
                    case 'REFUND':
                        //转入退款

                    break;
                    case 'NOTPAY':
                        //未支付

                    break;
                    case 'CLOSED':
                        //已关闭

                    break;
                    case 'REVOKED':
                        //已撤销(刷卡支付

                    break;
                    case 'USERPAYING':
                        //用户支付中

                    break;
                    case 'PAYERROR':
                        //支付失败(其他原因，如银行返回失败)

                    break;
                }
            },
            error : function() {
                 // view("异常！");
                 console.log("异常！");
            }

        });
    }

 </script>
</body>
</html>